//在Webpack 的配置文件可以写任何符合Node规范的代码
//因为webpack就是基于Node构建出来的前端自动化工具
var path = require('path')
//一般如果使用webpack的插件都是先导入这个插件，然后再plugin节点下，添加一个插件的配置
var htmlWebpackPlugin = require('html-webpack-plugin')

var OpenBrowserPlugin = require('open-browser-webpack-plugin')
//向外暴露一个配置对象
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),  //指定入口文件
    output:{//打包的输出选项
        path:path.join(__dirname,'./dist'),//输出路径
        filename:'bundle.js'   //指定输出文件名称
 
    },

    plugins:[
          new htmlWebpackPlugin({
              template:path.join(__dirname,'./src/index.html'),//指定模板页面
              filename:'index.html'    //指定内存中生成的页面的名称
          }),
          new OpenBrowserPlugin({ url: 'http://localhost:3001',browser:'chrome' })
        
    ],
    
    module:{  //配置第三方loader模块
        rules:[
            //匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']}, //处理css的loader
            {test:/\/less$/,use:['style-loader','css-loader','less-loader']},  //处理less的loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //处理sass文件的loader
            {test:/\.(png|gif|jpg|bmp|jpeg)$/,use:'url-loader'},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},  //配置转换高级js语法的loader
            //注意：必须添加exclude排除项exclude:/node_modules/
            {test:/\.vue$/,use:'vue-loader'},   //配置处理Vue文件的loader
            // {test:/\.(png|gif|jpg|bmp|jpeg)$/,use:'url-loader?name=[hash:32]-[name].[ext]'}
        ]

    }
}
/*------------------以上是最基本的配置文件------------------------*/